<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" style="padding-top: 30px">
          <a-col :md="6" :sm="8">
            <a-form-item label="销售订单号" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
              <a-input placeholder="销售订单号" v-model="queryParam.soNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="18" :sm="16">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="showOrClose" icon="search"  style="margin-left: 10px;">高级查询</a-button>
              <a-button type="primary" icon="download" @click="handleExportXls('eip_sales_order')" style="margin-left: 10px;">导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row v-if="show">
     
      <a-col :md="6" :sm="8">
        <a-form-item label="合同编号" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }"><a-input placeholder="合同编号" v-model="queryParam.conCode"></a-input></a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="物资名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }"><a-input placeholder="物资名称" v-model="queryParam.productName"></a-input></a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="采购方公司名称" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }"><a-input placeholder="采购方公司名称" v-model="queryParam.buyerName"></a-input></a-form-item>
      </a-col>
      <a-col :md="6" :sm="8" >
        <a-form-item label="组织架构" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
           <a-select
               v-model="value"
               mode="multiple"
               style="width: 100%"
               placeholder="select one country"
               option-label-prop="label"
             >
               <a-select-option value="平高电器" label="平高电器">
                  平高电器
               </a-select-option>
               <a-select-option value="组合电器" label="组合电器">
                 <span role="img" aria-label="组合电器">
                   平高
                 </span>
                 组合电器
               </a-select-option>
               <a-select-option value="断路器" label="断路器">
                 <span role="img" aria-label="断路器">
                   平高
                 </span>
                断路器
               </a-select-option>
               <a-select-option value="平芝" label="平芝">
                 平芝
               </a-select-option>
             </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
        项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="puid"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">下载</a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="toScdd(record)">关联生产订单</a>
          <a-divider type="vertical" />
          <!--<a-dropdown>-->
          <!--<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
          <!--<a-menu slot="overlay">-->
          <!--<a-menu-item>-->
          <!--<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
          <!--<a>删除</a>-->
          <!--</a-popconfirm>-->
          <!--</a-menu-item>-->
          <!--</a-menu>-->
          <!--</a-dropdown>-->
        </span>
      </a-table>
    </div>

    <zpgEipXsdd-modal ref="modalForm" @ok="modalFormOk"></zpgEipXsdd-modal>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import ZpgEipXsddModal from './modules/ZpgEipXsddModal';
import ACol from 'ant-design-vue/es/grid/Col';
import ARow from 'ant-design-vue/es/grid/Row';
import JDate from '@/components/jeecg/JDate';
export default {
  name: 'ZpgEipXsddList',
  mixins: [JeecgListMixin],
  components: {
    ARow,
    ACol,
    ZpgEipXsddModal,
    JDate
  },

  data() {
    return {
      value: ['平高电器'],
      description: 'zpg_eip_xsdd管理页面',
      show: false,
      orgName1: '',
      orgName2: '',
      org1: '',
      org2: '',
      // 表头
      columns: [
        {
          title: '销售订单号',
          align: 'center',
          dataIndex: 'soNo'
        },
        {
          title: '供应商名称',
          align: 'center',
          dataIndex: 'supplierName'
        },
        {
          title: '采购方公司名称',
          align: 'center',
          dataIndex: 'buyerName'
        },
        {
          title: '采购方省份',
          align: 'center',
          dataIndex: 'buyerProvince'
        },
        {
          title: '种类编码',
          align: 'center',
          dataIndex: 'subclassCode'
        },
        {
          title: '合同编号',
          align: 'center',
          dataIndex: 'conCode'
        },
        {
          title: '销售订单行项目号',
          align: 'center',
          dataIndex: 'soItemNo'
        },
        {
          title: '采购订单id或者采购订单行项目id',
          align: 'center',
          dataIndex: 'eipPoNo'
        },
        {
          title: '物资名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '物资单位',
          align: 'center',
          dataIndex: 'productUnit'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/eipSalesOrder/selectForList',
        delete: '/eipSalesOrder/delete',
        // deleteBatch: "/pg/zpgEipXsdd/deleteBatch",
        exportXlsUrl: '/eipSalesOrder/exportXls'
        // importExcelUrl: "pg/zpgEipXsdd/importExcel",
      },
      dictOptions: {}
    };
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },

  methods: {
    initDictConfig() {},
    showOrClose() {
      this.show = !this.show;
    },
    toScdd(record) {
      this.$router.push({ name: 'scddList', params: { poItemId: record.soNo} });
    }
  },
  mounted() {},
  watch: {
     value(val) {
       console.log(`selected:`, val);
     },
   },
};
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
